import React from 'react';
import { cn } from '@/lib/utils';
import { Button, ButtonProps } from './Button';

// 操作按钮属性接口，继承自基础Button组件
interface ActionButtonProps extends Omit<ButtonProps, 'variant' | 'className'> {
  // 是否有下拉箭头
  hasDropdown?: boolean;
  // 是否为主要操作按钮
  primary?: boolean;
  // CSS类名
  className?: string;
}

/**
 * 操作按钮组件
 * 专门用于工具栏和操作面板的统一样式按钮
 * 基于基础Button组件，预设了工具栏专用的样式
 * 
 * @example
 * // 基础操作按钮
 * &lt;ActionButton&gt;EXPAND&lt;/ActionButton&gt;
 * 
 * // 带下拉箭头的按钮
 * &lt;ActionButton hasDropdown&gt;TAG FILTER&lt;/ActionButton&gt;
 * 
 * // 主要操作按钮
 * &lt;ActionButton primary onClick={handleAddCollection}&gt;
 *   + ADD COLLECTION
 * &lt;/ActionButton&gt;
 */
export const ActionButton: React.FC<ActionButtonProps> = ({
  hasDropdown = false,
  primary = false,
  children,
  className,
  ...props
}) => {
  return (
    // 基础Button组件：预设工具栏样式
    <Button
      variant={primary ? 'primary' : 'outline'}
      size="sm"
      className={cn(
        // 工具栏按钮基础样式
        'font-medium text-xs transition-colors',
        // 非主要按钮的特殊样式
        !primary && [
          'border-gray-300 bg-white text-gray-700',
          'hover:bg-gray-50',
        ],
        // 主要按钮的特殊样式
        primary && [
          'bg-blue-600 text-white border-none',
          'hover:bg-blue-700',
        ],
        // 自定义样式
        className
      )}
      {...props}
    >
      {/* 按钮文本 */}
      {children}
      
      {/* 下拉箭头（如果需要） */}
      {hasDropdown && <span className="ml-1">▼</span>}
    </Button>
  );
};